<template>
  <div class="view">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      label-position="right"
      class="demo-ruleForm"
    >
      <el-form-item label="联盟" prop="union_id" v-show="false">
        <el-select v-model="form.union_id" placeholder="请选择联盟" :disabled="isEdit">
          <el-option
            :style="'textIndent:'+item.level+'em'"
            v-for="(item,index) in union"
            :key="index"
            :label="item.name"
            :value="item.union_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品价格分类" prop="goods_price_type">
        <el-select v-model="form.goods_price_type" placeholder="请选择产品价格类别" class="w200">
          <el-option
            :style="'textIndent:'+item.level+'em'"
            v-for="(item,index) in config.goods_price_type"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格ID" prop="type_id">
        <el-input v-model="form.type_id" class="w400"></el-input>
      </el-form-item>
      <el-form-item label="规格" prop="type">
        <el-input v-model="form.type" class="w400"></el-input>
      </el-form-item>
      <!-- <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" class="w400"></el-input>
      </el-form-item>-->

      <el-form-item label="价格类型" prop="price_type">
        <el-select
          v-model="form.price_type"
          placeholder="请选择价格类型"
          :class="form.price_type ? 'w100' : 'w200'"
        >
          <el-option
            :style="'textIndent:'+item.level+'em'"
            v-for="(item,index) in priceTypeList"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
        <!-- 规格单位 -->
        <el-form-item label="单位:" prop="price" class="inblock" v-if="form.price_type === 1">个</el-form-item>
        <!-- 步长数 -->
        <el-form-item prop="step" class="w100 inblock" v-if="form.price_type === 2">
          <el-input-number
            :step-strictly="true"
            v-model="form.step"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <!-- 步长单位 -->
        <el-form-item
          prop="goods_unit"
          label="单位"
          class="w200 inblock"
          v-if="form.price_type === 2"
        >
          <el-select v-model="form.goods_unit">
            <el-option
              :style="'textIndent:'+item.level+'em'"
              v-for="(item,index) in config.goods_unit"
              :key="index"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>

      <el-form-item label="价格(元)" prop="price" v-if="form.price_type">
        <div class="w200" style="display: inline-flex;">
          <el-input v-model="form.price"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="时间单位" prop="price_unit">
        <el-select v-model="form.price_unit" placeholder="请选择单位" class="w200">
          <el-option
            :style="'textIndent:'+item.level+'em'"
            v-for="(item,index) in config.goods_price_unit"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" class="w400"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right;">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { cacheConfig } from "@cache";
export default {
  props: ["isEdit", "union", "item", "version"],
  data() {
    return {
      form: {
        union_id: "",
        name: "",
        goods_price_type: "",
        type_id: "",
        type: "",
        price_type: "",
        remark: "",
        price: 0,
        step: 1,
        price_unit: "",
        goods_unit: "",
        goods_price_version: ""
      },
      rules: {
        union_id: [{ required: true, message: "请选择联盟", trigger: "blur" }],
        goods_price_type: [
          { required: true, message: "请选择产品价格分类", trigger: "blur" }
        ],
        type_id: [{ required: true, message: "请输入规格ID", trigger: "blur" }],
        price_type: [
          { required: true, message: "请选择价格类型", trigger: "blur" }
        ],
        price_unit: [
          { required: true, message: "请选择时间单位", trigger: "blur" }
        ],
        goods_unit: [
          { required: true, message: "请选择步长单位", trigger: "blur" }
        ]
      },
      config: {},
      goodList: [],
      goodPriceList: [],
      typeList: [],
      priceTypeList: [{ name: "规格", key: 1 }, { name: "步长", key: 2 }],
      unitList: []
    };
  },
  watch: {
    item: {
      handler(val) {
        if (Object.keys(val).length) {
          this.form = JSON.parse(JSON.stringify(val));
          this.form.price = this.form.price ? this.form.price / 1000 : 0;
        } else {
          for (const key in this.form) {
            this.form[key] = "";
          }
          this.form.goods_price_version = Number(this.version);
          this.form.union_id = this.union[0].union_id;
          this.form.step = 1;
          this.form.price_unit = cacheConfig.load().goods_price_unit[0].key;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit() {
      delete this.form["choose"];
      let url;
      if (this.isEdit) {
        url = "order.edit_price";
        this.form.id = this.item.id;
      } else {
        url = "order.add_price";
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          // 处理参数类型
          this.form.step = Number(this.form.step);
          this.form.price = Number(this.form.price);
          let params = JSON.parse(JSON.stringify(this.form));
          params.price = Number((params.price * 1000).toFixed(0));
          // 选择规格时，步长数据初始化
          if (params.price_type === 1) {
            params.step = 1;
            params.goods_unit = this.config.goods_unit[0].key;
          }
          this.$api.jpost(url, params).then(res => {
            if (res.status === 1) {
              this.$success(res.msg);
              this.$emit("refresh");
              this.cancel();
            } else {
              this.$error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$emit("close");
    }
  },
  mounted() {
    this.config = cacheConfig.load();
    this.form.price_unit = this.config.goods_price_unit[0].key;
  }
};
</script>

<style lang="scss" scoped>
/deep/.view {
  & div.inblock > label.el-form-item__label {
    width: 60px !important;
  }
  & div.inblock > div.el-form-item__content {
    margin-left: 10px !important;
  }
  & div.el-form-item__content {
    display: flex;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    width: 30px;
  }
  .el-input-number.is-controls-right .el-input__inner {
    padding-left: 0px;
    padding-right: 30px;
  }
}
</style>